<script setup>
import { useMountLayer } from '@sw/v-ol'
import { GeoJSON } from 'ol/format'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Fill, Style } from 'ol/style'
// import { debounce, isEmpty } from 'lodash-es'
// import { sdExtent } from '@/components/ol-container/helper/config'
// import { createShade } from '@/components/ol-container/helper/createFence'
// import { getWeatherJson } from '@/api/model-common'

const props = defineProps({
  code: String
})
const map = inject('map')
const [layer] = useMountLayer(() => [
  new VectorLayer({
    style: new Style({
      // stroke: new Stroke({ color: '#3f6490', width: 1.5 }),
      fill: new Fill({ color: '#3f6490' })
    }),
    source: new VectorSource()
  })
])

const loadGeoJsonFile = async function () {
  const source = layer.getSource()
  source.clear()
  const fileName = `neimenggu_${props.code}.geojson`
  const response = await fetch(`./geoJson/${fileName}`)
  const geojson = await response.json()
  const features = new GeoJSON().readFeatures(geojson, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  })
  source.addFeatures(features)
  const extent = source.getExtent()
  map.getView().fit(extent, { padding: [200, 200, 200, 200] })
}
watchEffect(() => {
  loadGeoJsonFile()
})
// onMounted(() => {
//   map.getView().fit([
//     13765536.315853287,
//     6304962.321166405,
//     13926949.577503532,
//     6446059.365793306
//   ])
// })
</script>

<template>
  <div />
</template>
